<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引⼊ layui.css -->
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: url(./inp5.jpg) no-repeat;
            background-size: 100% 100vh;
        }

        h1 {
            text-align: center;
        }

        .fu {
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            width: 500px;
            height: 400px;
            margin: auto;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-sizing: border-box;
            padding-top: 40px;
        }

        .demo-login-container {
            width: 320px;
            margin: 21px auto 0;
        }

        .demo-login-other .layui-icon {
            position: relative;
            display: inline-block;
            margin: 0 2px;
            top: 2px;
            font-size: 26px;
        }

        /* 提示 */
        .Tips {
            position: fixed;
            top: calc(50%);
            left: calc(50%);
            transform: translate(-50%, -50%);
            padding: 10px;
            border-radius: 15px;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            display: none;
            text-align: center;
            z-index: 10000000000000;
        }
    </style>
</head>

<body>

    <div class="fu">
        <h1>登录</h1>
        <form class="layui-form">
            <div class="demo-login-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="username" value="" lay-verify="required|username" placeholder="用户名"
                            lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="password" value="" lay-verify="required|confirmPassword"
                            placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input"
                            lay-affix="eye">
                    </div>
                </div>
                <div class="layui-form-item div_pasd">
                    <input class="is" type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                    <input class="falg" type="checkbox" name="remember" lay-skin="primary" title="自动登录">
                    <span style="float: right; margin-top: 7px;cursor: pointer;"
                        onclick="Forgot_password()">忘记密码？</span>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
                </div>
                <div class="layui-form-item demo-login-other">
                    <span style="cursor: pointer;color: #3492ed;" onclick="Register()">注册帐号</span>
                </div>
            </div>
        </form>
    </div>
    <!-- 提示框 -->
    <div class="Tips"></div>
    <!-- 引⼊ layui.js -->
    <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>
    <!-- CDN引⼊JQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 异步加载
        window.onload = () => {
            certification('User')
        }
        // 用户登录
        layui.use(function () {
            var form = layui.form;
            var layer = layui.layer;
            var User = JSON.parse(localStorage.getItem('User'))
            // 认证账户
            const getkey = (key) => {
                const arr = JSON.parse(localStorage.getItem(key))
                return str = arr.name == $('input[name=username]').val() ? false : true
            }
            // 自定义验证规则
            form.verify({
                username: function (value, elem) {
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^_)|(__)|(_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线';
                    }
                    if (/^\d+$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                    if (getkey('User')) {
                        return '用户名不存在';
                    }
                },
                // 确认密码
                confirmPassword: function (value, item) {
                    if (!/^[\S]{6,16}$/.test(value)) {
                        return '密码必须为 6 到 16 位的非空字符';
                    }
                    // 认证密码
                    const getkey = (key) => {
                        const arr = JSON.parse(localStorage.getItem(key))
                        return str = arr.password == value ? false : true
                    }
                    if (getkey('User')) {
                        return '密码错误';
                    }
                },
            });
            // 提交事件
            form.on('submit(demo-login)', function (data) {
                User.is = $('.is').prop('checked')
                User.falg = $('.falg').prop('checked')
                localStorage.setItem('User', JSON.stringify(User))
                location.assign('./商品管理系统.html')
                return false; // 阻止默认 form 跳转
            });
        });
        // 注册
        function Register() {
            event.preventDefault()
            location.assign('./商品管理注册页面.html')
        }
        // 默认行为认证
        function Testing() {
            let arr = JSON.parse(localStorage.getItem('User'))
            if (arr.is && arr.falg) {
                $('input').eq(0).val(arr.name)
                $('input').eq(1).val(arr.password)
                $('.is').prop('checked', arr.is)
                $('.falg').prop('checked', arr.falg)
                $('.layui-unselect').addClass('layui-form-checked')
                location.assign('./商品管理系统.html')
            } else if (arr.is) {
                $('input').eq(0).val(arr.name)
                $('input').eq(1).val(arr.password)
                $('.is').prop('checked', arr.is)
                $('.layui-unselect').eq(0).addClass('layui-form-checked')
            }
        }
        // 认证是否自动登录
        function certification(key) {
            const arr = localStorage.getItem(key)
            if (arr) {
                Testing()
            }
        }
        // 忘记密码
        function Forgot_password() {
            localStorage.clear()
            let num = 7
            setInterval(() => {
                num--
                Hint(`注销成功 [ ${num} ] 后跳转注册页面！`)
            }, 1000)
            setTimeout(() => {
                location.assign('./商品管理注册页面.html')
            }, 7000)
        }
        // 添加提示符
        function Hint(add) {
            $('body').append(`<div class='Tips'></div>`)
            $('.Tips').fadeTo(500, 1)
            $('.Tips').text(add)
            setTimeout(() => {
                $('.Tips').fadeTo(1000, 0)
            }, 7000)
            setTimeout(() => {
                $('.Tips').detach()
            }, 8000)
        }
    </script>
</body>

</html>